<template>
  <div class="swiperBox">
   <swiper :options="swiperOption">
    <swiper-slide v-for="item in swiperList" :key="item.id" v-if="showSwiper">
      <img :src="item.path" alt="" class="swiperImg">
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList: [
        { id: '1', path: 'http://img1.qunarzz.com/piao/fusion/1812/d6/daa880b254940402.jpg_750x200_b114308a.jpg' },
        { id: '2', path: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/379ba938cdca8e1954a192e3f9ba124b.jpg_750x200_ce8ba7f8.jpg' }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.swiperBox >>> .swiper-pagination-bullet-active {
background: {
  color: #fff;
}
}
.swiperBox {
width: 100%;
height: 0;
overflow: hidden;
padding: {
  bottom: 30%;
}
}
.swiperImg {
width: 100%;
}

</style>
